<template>
	<view class="searchApp" :style="{'width':widths + 'px'}">
		<view class="search_main" @click="$emit('click')">
			<view class="icon">
				<uni-icons type="search" color="#696969" size="20" style="margin-right: 10rpx;"></uni-icons>
			</view>
			<input type="text" @focus="showSearchContext(true)" placeholder="要输入什么" style="font-size: 24rpx;width: 80%;"
				v-model="searchKeyValue" :disabled="requestNow" />
			<view class="closeWindow" v-if="inFocus" @click="showSearchContext(false)">
				关闭
			</view>
		</view>
		<scroll-view scroll-y="true" class="search_context" v-if="inFocus"
			:style="{height:heights - 50 + 'px',width:widths + 'px'}">
			<view class="search_list" v-for="item,index in serachReaultData" :key='index' style="overflow:hidden;white-space:nowrap;text-overflow: ellipsis;padding-right: 50rpx ;" @click="changRouter(item.goods_id,item.goods_name)">
				{{item.goods_name}}
				<view class="search_context_icon">
					<uni-icons type="right" size="20" color="#696969" ></uni-icons>
				</view>
			</view>
			<view class="hidden_context" :style="{height:heights - 50 + 'px',width:widths + 'px'}" v-show="serachReaultData.length < 1">
				<view class="hiiden_titel">
					搜索历史
					<uni-icons type="trash" size="20" color="#696969" @click="closeHistory"></uni-icons>
				</view>
				<view class="hidden_heasty">
					<view class="hidden_heasty_child" v-for="item,index in hestoryKeyData" :key='index' @click="searchHistory(item)">
						{{item}}
					</view>
					<view class="no_heasty" v-show="hestoryKeyData.length == 0">
						暂无搜索记录
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import easyReq from '../../Tools/EasyReq.js'
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		watch,
		markRaw
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	export default defineComponent({
		name: "Search",
		emits: ['click'],
		setup(props, context) {
			const system = uni.getSystemInfoSync()
			const datas = reactive({
				inFocus: false,
				searchKeyValue: '',
				enKeys: "",
				timer: '',
				serachReaultData: [],
				hestoryKeyData:[],
				requestNow:false
			})
			function changRouter(good_id,goods_name){
				if(good_id){
					uni.navigateTo({
						url:`/subpkg/goods_list/goods_list?id=${good_id}&titel=${goods_name}`
					})
				}
			}
			function showSearchContext(isFocus = false) {
				if (isFocus) datas.inFocus = true
				else{
					datas.inFocus = false
					datas.searchKeyValue = ''
					datas.enK = ''
				}
			}
			function closeHistory(){
				datas.hestoryKeyData = []
				uni.setStorageSync('history','')
			}
			function searchHistory(item){
				if(typeof item === 'string' && item.length > 0){
					datas.searchKeyValue = item
				}
			}
			onLoad(()=>{
				datas.hestoryKeyData = JSON.parse(uni.getStorageSync('history')) || []
			})
			watch(() => datas.searchKeyValue, (newValue) => {
				const {
					searchKeyValue,
					enKeys
				} = datas
				clearTimeout(datas.timer)
				if (searchKeyValue) {
					try{
						datas.timer = setTimeout(async () => {
							if (searchKeyValue == enKeys) {
								return
							}
							datas.requestNow = true
							datas.enKeys = datas.searchKeyValue
							datas.serachReaultData = markRaw(await easyReq(`/api/public/v1/goods/qsearch?query=${searchKeyValue}`)) 
							datas.requestNow = false
							if(datas.serachReaultData.length == 0){
								uni.showToast({
									title:'搜索为空',
									icon:'none',
								})
								datas.searchKeyValue = ''
								datas.enKeys = ''
							}else{
								if(datas.hestoryKeyData.indexOf(searchKeyValue) === -1){
									if(datas.hestoryKeyData.length >= 5){
										datas.hestoryKeyData = datas.hestoryKeyData.slice(1)
									}
										searchKeyValue
										datas.hestoryKeyData.push(searchKeyValue.length > 5 ? searchKeyValue.slice(0,4): searchKeyValue)
										uni.setStorageSync('history',JSON.stringify(datas.hestoryKeyData))
								}
							}
							
						}, 700)
					}catch(err){
						uni.showToast({
							title:'网路出错了',
							icon:'none',
						})
						datas.searchKeyValue = ''
						datas.enKeys = ''
					}
				}
				
				datas.serachReaultData = []
				return
				
			})
			return {
				showSearchContext,
				widths: system.windowWidth,
				...toRefs(datas),
				heights: system.windowHeight,
				changRouter,
				closeHistory,
				searchHistory
			}
		}
	})
</script>

<style lang="scss">
	.no_heasty{
		text-align: center;
		font-size: 25rpx;
		width: 100%;
		color:#696969 ;
	}
	.hidden_context{
		font-size: 28rpx;
		color: #696969;
		.hiiden_titel{
			display: flex;
			justify-content:space-between ;
			align-items: center;
			padding: 25rpx 15rpx;
			border-bottom: 1px solid #A9A9A9;
		}
		.hidden_heasty{
			padding: 25rpx 15rpx;
			// justify-content: space-around;
			display: flex;
			.hidden_heasty_child{
				width:19%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-decoration: underline;
			}
		}
	}
	.searchApp {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
		height: 100rpx;
		background-color: #DD524D;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		.search_main {
			height: 60%;
			width: 90%;
			display: flex;
			align-items: center;
			padding-left: 10rpx;
			background-color: white;
			margin: 10px auto;
			border-radius: 30rpx;

			.closeWindow {
				display: block;
				padding: 15rpx;
				background-color: #DD524D;
				font-size: 18rpx;
				color: white;
				border-radius: 20px;
				margin-left: 14rpx;
			}
		}

		.search_context {
			background-color: white;
			padding: 0 10rpx;

			.search_list {
				height: 100rpx;
				padding-left: 10rpx;
				line-height: 100rpx;
				position: relative;
				border-bottom: 1px solid #A9A9A9;
				.search_context_icon{
					position: absolute;
					right: 3px;
					top: 8rpx;
				}
			}
		}

	}
</style>
